<template>
    <div style="margin-top: 50px">
        <!--采购信息标题-->
        <el-row style="margin-right: 150px">
            <el-col :span="24"><div class="grid-content bg-purple-dark">
                <span style="font-size: 25px">出库信息查询</span>
            </div></el-col>
        </el-row>

        <!--表格-->
        <el-row style="margin-top: 25px;margin-left: 50px">
            <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                    <el-table
                            :data="tableData"
                            width="55%"
                            height="200px"
                            highlight-current-row
                            @current-change="handleCurrentChange">
                        <el-table-column
                                property="name"
                                label="客户名称"
                                width="200">
                        </el-table-column>
                        <el-table-column
                                property="person"
                                label="销售员"
                                width="150">
                        </el-table-column>
                        <el-table-column
                                property="time"
                                label="出库时间"
                                width="280">
                        </el-table-column>
                        <el-table-column
                                property="total"
                                label="订单总额"
                                width="280">
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
        </el-row>

        <!--分页和查询还有按钮-->
        <el-row style="margin-top: 30px;margin-right: 400px">
            <el-col :span="14"><div class="grid-content bg-purple">
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="total"
                        :page-size="pageSize"
                        @current-change="change">
                </el-pagination>
                <div style="margin-top: 100px">
                    <el-button type="success" @click="orderInfo">查看出库详情</el-button>
                </div>
            </div></el-col>

            <el-col :span="10"><div class="grid-content bg-purple-light">
                <el-card class="box-card">
                    <span>查询出库信息</span><br>
                    <el-form ref="form" :model="form" label-width="80px" style="margin-left: 50px;margin-right: 50px;margin-top: 10px">
                        <el-form-item label="客户名称">
                            <el-input v-model="custom"></el-input>
                        </el-form-item>
                        <el-form-item label="起始日期">
                            <el-input v-model="start"></el-input>
                        </el-form-item>
                        <el-form-item label="结束日期">
                            <el-input v-model="end"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-button type="primary" @click="init">查询</el-button>
                </el-card>
            </div></el-col>
        </el-row>


        <!--查看客户弹框-->
        <el-dialog
                title="出库详情"
                :visible.sync="queryInfo"
                width="50%">
            <el-form ref="form" :model="form" label-width="100px" style="margin-right: 90px;margin-left: 50px">
                <el-form-item label="客户名称:">
                    <span>{{customName}}</span>
                </el-form-item>
                <el-form-item label="销售员:">
                    <span>{{user}}</span>
                </el-form-item>
                <el-form-item label="销售时间:">
                    <span>{{time}}</span>
                </el-form-item>
                <el-form-item label="订单金额:">
                    <span>{{totalMoney}}</span>
                </el-form-item>
                <el-form-item label="送货地址:">
                    <span>{{address}}</span>
                </el-form-item>
            </el-form>
            <span style="float: left;margin-left: 60px;font-weight: bold">采购物品明细</span>
            <el-table style=""
                    :data="orderData"
                    width="50%"
                    height="250px"
                    highlight-current-row
                    @current-change="handleCurrentChange">
                <el-table-column
                        property="name"
                        label="商品名称"
                        width="200">
                </el-table-column>
                <el-table-column
                        property="mill"
                        label="厂家"
                        width="200">
                </el-table-column>
                <el-table-column
                        property="money"
                        label="成交价"
                        width="100">
                </el-table-column>
                <el-table-column
                        property="count"
                        label="出库数量"
                        width="100">
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "OutputInfo",
        data(){
            return{
                //出库详情表格
                tableData:"",
                //分页参数
                current:1,
                pageSize:3,
                total: 20,
                //动态查询
                custom:"",
                start:"",
                end:"",
                //查看信息页面
                queryInfo:false,
                //展示出库信息详情
                orderId:"",
                customName:"",
                user:"",
                time:"",
                totalMoney:"",
                address:"",
                orderData:"",
            }
        },mounted() {
            this.init();
        },methods:{
            handleCurrentChange(val){
                this.orderId =  val.id;
            },
            //初始化
            init(){
                this.axios.get("jxc/outputInfo/findByPageAndItem",{
                    params:{
                        current: this.current,
                        pageSize: this.pageSize,
                        name: this.custom,
                        start: this.start,
                        end: this.end,
                    }
                }).then(
                    r =>{
                        this.tableData = r.data.records;
                        this.total = r.data.total;
                    }
                )
            },
            //页码改变
            change(current){
                this.current = current;
                this.init()
            },
            //查看订单信息详情
            orderInfo(){
                this.axios.get("jxc/outputInfo/findById",{params:{id:this.orderId}}).then(
                    r => {
                        this.customName = r.data.name;
                        this.user = r.data.person;
                        this.time = r.data.time;
                        this.totalMoney = r.data.total;
                        this.address = r.data.address;
                        this.orderData = r.data.outputOrderBeans;
                    }
                );
                this.queryInfo = true;
            }
        }
    }
</script>

<style scoped>

</style>